<template>
  <div class="containerbox">
    <div class="container">
      <el-descriptions title="收货人信息">
        <el-descriptions-item label="收货人姓名">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="收货人电话">{{ form.mobile}}</el-descriptions-item>
        <el-descriptions-item label="收货人地址">{{ form.address }}</el-descriptions-item>
        <el-descriptions-item label="订单编号">{{ id }}</el-descriptions-item>
        <el-descriptions-item label="订单备注">{{ form.remarks }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{['余额','积分','微信','支付宝','银行卡'][form.pay_type]}}</el-descriptions-item>
        <el-descriptions-item label="支付时间" v-if="form.pay_time">{{ $clearTimer(form.pay_time) }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="快递信息" v-if="form.state>1">
        <el-descriptions-item label="快递公司">{{ form.logistics }}</el-descriptions-item>
        <el-descriptions-item label="快递单号">{{ form.waybill}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="售后信息"  v-if="data.refunds_type">
        <el-descriptions-item label="退款方式">{{ data.refunds_type }}</el-descriptions-item>
        <el-descriptions-item label="退款原因">{{ data.refunds_type }}</el-descriptions-item>
        <el-descriptions-item label="退款说明">{{ data.refunds_type }}</el-descriptions-item>
        <el-descriptions-item label="申请时间"v-if="data.UpdatedAt">{{ data.UpdatedAt }}</el-descriptions-item>
        <el-descriptions-item label="退款凭证" v-if="geteval(data.img)[0]">
          <el-image style="width:100px;" class="table-td-thumb" :src="geteval(data.img)[0]" :preview-src-list="[...geteval(data.img)]"></el-image>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :title="'购买商品'" >
        <el-descriptions-item :label="'商品'+(index+1)"  v-for="(itme, index) in shopping_list" :key='index'>
          <template>
            <div class="goodslist" >
            <img :src="itme.goods.img" alt="">
            <div class="goodsdetail">
              <div>{{ itme.goods.name }}</div>
              <div>属性：{{ itme.attributes }}</div>
              <div>数量：{{ itme.number }}</div>
            </div>
          </div>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :title="'退款商品'"  v-if="data.refunds_type">
        <el-descriptions-item  :label="'商品'+(index+1)"  v-for="(itme, index) in data.data" :key='index'>
          <template>
            <div class="goodslist" >
            <img :src="itme.goods.img" alt="">
            <div class="goodsdetail">
              <div>{{ itme.goods.name }}</div>
              <div>数量：{{ itme.number }}</div>
            </div>
          </div>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {},
      order_logistics: '',
      order_waybill: '',
      shopping_list:[],
      id: 0,
      data:{},
      list: ["顺丰", '邮政', '中通', '圆通', '申通', '京东', '百世快递', '韵达', '德邦', '天天','极兔', '其他'],
      fahuo:0,
      state:0
    };
  },
  created() {
    this.id = this.$route.query.id ? this.$route.query.id : 1
    try {
      this.data=this.$route.query
      this.data.data=JSON.parse(this.$route.query.data)
    } catch (error) {
      
    }
    try {
      this.state=this.$route.query.state
    } catch (error) {
      this.state=0
    }
    this.getdata(this.id)
  },
  methods: {
    geteval(img){
      try {
        return eval('('+img+')')
      } catch (error) {
        return []
      }
      
    },
    getdata(id) {
      console.log(this.state)
      this.request('admin/order/', 'put', { order: id,state:this.state||0 }).then(res => {
        this.form = res.data[0]
        this.form['address']=res.data[0].province+res.data[0].city+res.data[0].area+res.data[0].detailed
        this.shopping_list=res.data
        this.order_logistics=res.data[0].logistics
        this.order_waybill=res.data[0].waybill
        let list= res.data
        let num = 0
         list.forEach(item => {
          if(item.state==1){
            num++
          }
        })
        this.fahuo=num

      })
    },
    submit() {
      let that=this
      this.request('admin/order/', 'post', {'order': this.id,'logistics': this.order_logistics,'waybill': this.order_waybill}).then(res => {
        if (res.errno == 0) {
          this.$message.success('发货成功');
          setTimeout(function () {
            that.$router.push('/order/order')
            }, 500);
        } else {
          this.$message.error(res.errmsg)
        }
      })
    },
    submits() {
      let taht=this
      this.request('admin/order/', 'DELETE', {'order': this.id}).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          setTimeout(function () {
            taht.$router.push('/order/order')
            }, 500);
        } else {
          this.$message.error(res.errmsg)
        }
      })
    }
  },

}
</script>

<style scoped="scoped">
.containerbox {
  padding: 20px;
}

.goodslist {
  height: 200px;
  /* background-color: snow; */
  display: flex;
  justify-content: flex-start;
  /* align-items: center; */
  width: 100%;

}

.goodslist img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.goodsdetail div{
margin: 10px 0;
}
.submt {

  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
</style>
